<template>
	<view class="">
		<!-- <mescroll-uni ref="mescrollRef" top="0" bottom="200rpx" :height="height" @init="mescrollInit"
            @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
        </mescroll-uni> -->
		<!-- <uni-list>

			<community-list width="336rpx" type="waterfall" :list="lists"></community-list>

		</uni-list> -->
		<!-- <text>{{item.id}}</text> -->
		<community-list width="750rpx" type="waterfall" :list="lists"></community-list>

		
		<view v-if="loadshow" style="text-align: center; padding: 20rpx;">{{loadStatus}}</view>


		<!-- <u-waterfall ref="uWaterfall" v-model="lists" :add-time="50">
		    <template v-slot:left="{leftList}">
		        <view style="padding:0 9rpx 0 30rpx">
		            <community-list width="336rpx" type="waterfall" :list="leftList"></community-list>
		        </view>
		    </template>
		    <template v-slot:right="{rightList}">
		        <view style="padding:0 30rpx 0 9rpx;">
		            <community-list width="336rpx" type="waterfall" :list="rightList"></community-list>
		        </view>
		    </template>
		</u-waterfall> -->
		
	</view>
</template>

<script>
	import {
		// getshowshowinfo,
		getCommunityArticleLists,
		getapishowlists
	} from '@/api/community.js';
	import {
		trottle
	} from "@/utils/tools.js"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
	export default {
		mixins: [MescrollMixin, MescrollMoreItemMixin],
		props: {
			cateId: {
				type: [String, Number]
			}
		},
		data() {
			return {
				name: '',
				show_slogan: '',
				avatar: '',
				poster: '',
				height: '',
				upOption: {
					empty: {
						icon: '/static/images/news_null.png',
						tip: '暂无任何内容...', // 提示
						fixed: true,
						top: "0",
					}
				},
				lists: [],
				loadshow: true,
				loadStatus:'加载中',
				page: 1,
				maxpage:0,
				page_size: 20 // 配置每页请求数量
			}
		},
		mounted() {
			let _this = this;

			this.getList()
			uni.$on('changeItem', (event) => {
				const index = this.lists.findIndex(el => el.id == event.id)
				if (index == -1) return
				this.$refs.uWaterfall.modify(event.id, 'like', event.like)
				this.$refs.uWaterfall.modify(event.id, 'is_like', event.is_like)
			})

			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight - 46 + 'px';
				}
			});
			
			uni.$on('onReachBottom', (data) => {
				console.log('触底了111')
				_this.loadStatus='加载中';
				if(_this.maxpage > 1 && _this.page <= _this.maxpage) {
					_this.getList(()=>{
						
					})
				} else {
					_this.loadStatus='没有更多';
				}
				
		   });
		},
		// 下拉刷新
		// onPullDownRefresh() {
		// 	this.getfinishprocess()
		// 	// 关闭下拉刷新
		// 	// uni.stopPullDownRefresh()
		// 	getapishowlists({
		// 		page_no: 1,
		// 		page_size: 20
		// 	}).then(res => {
		// 		console.log(res, 'image111111')
		// 		// console.log(res,'id')
		// 		if (res.code == 1) {
		// 			_this.lists = res.data.lists
		// 		}
		// 	})
		// },
		// onReachBottom(){
		// 	if(this.timer !=nell){
		// 		clearTimeout(this.timer)
		// 	}
		// 	this.timer =setTimeout(()=>{
		// 		this.getmorenews()
		// 	},1000);
		// },
		methods: {
			getList(callback=()=>{}) {
				let _this = this;
				let data_arr = {
					'page_no': this.page,
					'page_size': this.page_size
				};
				
				getapishowlists(data_arr).then(res => {
					
					if (res.code == 1) {
						_this.lists = _this.lists.concat(res.data.lists);
						 
						_this.maxpage = Math.ceil(res.data.count / Number(res.data.page_size))
						if(_this.maxpage > 1 && _this.page <= _this.maxpage) {
							_this.page++
						}
						if(_this.maxpage == _this.page){
							_this.loadStatus = '没有更多'
						}
						callback();
					}
				})


			},

			// 获取
			async upCallback(page) {
				const pageNum = page.num
				const pageSize = page.size

				getCommunityArticleLists({
					cate_id: this.cateId,
					page_no: pageNum,
					page_size: pageSize,
				}).then(res => {
					// 如果是第一页需手动置空列表
					if (pageNum == 1) {
						this.$refs.uWaterfall.clear()
						this.lists = []
					}
					// 重置列表数据
					const hasNext = !!res.data.more;
					// 异步：让vue能够监听到数据改变过了

					// has_new 是通知父组件将关注右上角的是否新更新小点显示或隐藏
					uni.$emit('hasNew', res.data.has_new)

					setTimeout(() => {
						this.lists = [...this.lists, ...res.data.list]
					}, 0)
					this.mescroll.endSuccess(res.data.list.length, hasNext);
				})
			},
			getmorenews() {
				if (this.loadingType !== 0) { //loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;

				uni.showNavigationBarLoading(); //显示加载动画

				API_Article.getShangschoolList(this.params).then(response => {

					this.params.page_no++; // 得到数据之后 page+1

					if (response.data.length < 1) { // 没有数据

						this.loadingType = 2;

						uni.hideNavigationBarLoading(); // 关闭加载动画

						return;

					}

					this.page++; // 每触底一次 page +1

					this.TotalDate = this.TotalDate.concat(response.data); //将数据拼接在一起

					this.loadingType = 0; // 将loadingType归0重置

					uni.hideNavigationBarLoading(); // 关闭加载动画

				})

			},
		},
		onReachBottom(){
			console.log('触底')
		}
	}
</script>

<style>
</style>